<script  setup>

import { queryData,agreeApprove,disagreeApprove } from '@/api/approval'
import { ref,onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import {useRouter}  from 'vue-router'
const router = useRouter()

const activeName = ref('first')

const store = useUserStore()

const tableData = ref([])

const untableData = ref([])

// 表单状态
const filterState = ref(true)
// 表单数据
const formData = ref({
  pageNum: 1,
  pageSize: 10,
  size:10

})

// const params = ref({})
// params.value.roleId = store.roleId
// params.value.userId = store.user.id
const loadData = async() =>{
  let r = await queryData({
    roleId:store.roleId,
    // roleId:1,
    userId:store.user.id,
    reporterName:formData.value.reporterName,
    type:formData.value.type
  })
  console.log("r.data",r)
  untableData.value = r.data.list
  

  let rt = await queryData({
    userId :store.user.id,
    reporterName:formData.value.reporterName,
    type:formData.value.type
  })
  tableData.value = rt.data.list
}
onMounted(()=>{
  loadData()
})


const searchFn = ()=>{
  loadData()
}
//同意审批
const agree = async (row) =>{
  /////////
  if(row.state==5){
    ElMessage.error("该条记录已被驳回，不可操作")
  }else{
    let r = await agreeApprove(row.id,row.state)
    if(r.code==200){
      ElMessage.info("审批成功")
      loadData()
    }else{
      ElMessage.info("审批失败")
    }
  }
  
}

//不同意审批
const disagree = async(row) =>{
  ///////
  if(row.state==5){
    ElMessage.error("该条记录已被驳回，不可操作")
  }else{
    let r = await disagreeApprove(row.id)
    if(r.code==200){
      ElMessage.info("审批成功")
      loadData()
    }else{
      ElMessage.info("审批失败")
    }
  }
}

const onSizeChange = (val) => {
  formData.value.size = val
  formData.value.pageSize = val
  loadData()
}
const onCurrentChange = (val) => {
  formData.value.pageNum = val
  loadData()
}

</script>
<template>
  <Box>
    <!-- 筛选 -->
    <template #filter >
      <el-form :inline="true" :model="formData">
        <el-form-item label="姓名">
          <el-input placeholder="姓名" v-model="formData.reporterName" />
        </el-form-item>
        <el-form-item label="申请类型"  >
          <el-select style="width: 200px" v-model="formData.type" >
            <el-option
              v-for="item in [
                { label: '补卡', value: 1 },
                { label: '事假', value: 2 },
                { label: '年休', value: 3 }
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

        </el-form-item>
        <!-- <el-form-item label="审批状态">
          <el-select placeholder="全部" style="width: 80px" >
            <el-option
              v-for="item in [
                { label: '待审批', value: 1 },
                { label: '已审批', value: 0 }
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="searchFn"> <span class="iconfont icon-sousuo"></span>搜索 </el-button>
          <el-button type="default"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- 筛选 -->

    <!-- 按钮组 -->
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="router.push({ path: '/approval/apply' })">
          <span class="iconfont icon-jiahao"></span>发起申请
        </el-button>
      </el-col>

      <el-col :span="12" style="text-align: right">
        <el-button circle @click="filterState = !filterState">
          <span class="iconfont icon-sousuo"></span>
        </el-button>
        <el-button circle>
          <span class="iconfont icon-shuaxin"></span>
        </el-button>
      </el-col>
    </el-row>
    <!-- 按钮组 -->
    
    <!-- // 标签页 -->
        <el-tabs v-model="activeName" class="demo-tabs" style="margin-top: 20px;" @tab-click="handleClick" type="border-card">
            <el-tab-pane label="待审批" name="first">
                <el-table :data="untableData" :border="true" class="qfTable" row-key="id" default-expand-all>
                  <el-table-column label="用户名" prop="reporterName" align="center" ></el-table-column>
                  <el-table-column label="部门" prop="reporterDeptName" align="center" width="160"></el-table-column>     
                  <el-table-column label="申请开始时间" prop="startTime" align="center" width="200"></el-table-column>
                  <el-table-column label="申请结束时间" prop="endTime" align="center" width="200"></el-table-column>
                  <el-table-column label="请假时长(小时)" prop="approvalTime" align="center" width="200"></el-table-column>
                  <el-table-column label="申请类型" prop="type" align="center" width="200">
                    <template #default="scope">
                      <el-tag v-if="scope.row.type == 1" type="success">补卡</el-tag>
                      <el-tag v-if="scope.row.type == 2" type="info">事假</el-tag>
                      <el-tag v-if="scope.row.type == 3" type="info">年休</el-tag>
                    </template>
                  </el-table-column>
                
                  <el-table-column label="相关文件" prop="approvalFile" align="center" width="160"></el-table-column>  
                  <el-table-column label="状态" prop="state" align="center" width="200">
                    <template #default="scope">
                      <el-tag v-if="scope.row.state == 0" type="info">等待部门领导审批</el-tag>
                      <el-tag v-if="scope.row.state == 1" type="info">等待人事审批</el-tag>
                      <el-tag v-if="scope.row.state == 2" type="info">等待领导审批</el-tag>
                      <el-tag v-if="scope.row.state == 3" type="success">审批通过</el-tag>
                      <el-tag v-if="scope.row.state == 5" type="error">审批不通过</el-tag>
                    </template>
                  </el-table-column>
                    <el-table-column label="操作" align="center" width="120" fixed="right">
                        <template #default="scoped">
                            <el-button type="primary" link size="small" @click="agree(scoped.row)">
                                <span class="iconfont icon-bianji"></span>审批
                            </el-button>
                            <el-button type="primary" link size="small" @click="disagree(scoped.row)">
                                <span class="iconfont icon-shanchu"></span>驳回
                            </el-button>
                        </template>
                    </el-table-column>
                 </el-table>
                 <el-pagination
                  v-model:current-page="formData.pageNum"
                  v-model:page-size="formData.pageSize"
                  :page-sizes="[10, 20, 30, 40]"
                  :background="true"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="untableData.length"
                  @size-change="onSizeChange"
                  @current-change="onCurrentChange"
                />
<!--              <el-pagination background layout="prev, pager, next" :total="1000" />-->
            </el-tab-pane>
            <el-tab-pane label="已审批" name="second">
                <el-table :data="tableData" :border="true" class="qfTable" row-key="id" default-expand-all>
                  <el-table-column label="用户名" prop="reporterName" align="center" ></el-table-column>
                  <el-table-column label="部门" prop="reporterDeptName" align="center" width="160"></el-table-column>     
                  <el-table-column label="申请开始时间" prop="startTime" align="center" width="200"></el-table-column>
                  <el-table-column label="申请结束时间" prop="endTime" align="center" width="200"></el-table-column>
                  <el-table-column label="请假时长(小时)" prop="approvalTime" align="center" width="200"></el-table-column>
                  <el-table-column label="申请类型" prop="type" align="center" width="200">
                    <template #default="scope">
                      <el-tag v-if="scope.row.type == 1" type="success">补卡</el-tag>
                      <el-tag v-if="scope.row.type == 2" type="info">事假</el-tag>
                      <el-tag v-if="scope.row.type == 3" type="info">年休</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="相关文件" prop="approvalFile" align="center" width="160"></el-table-column>     
                  <el-table-column label="状态" prop="state" align="center" width="200">
                    <template #default="scope">
                      <el-tag v-if="scope.row.state == 0" type="info">等待部门领导审批</el-tag>
                      <el-tag v-if="scope.row.state == 1" type="info">等待人事审批</el-tag>
                      <el-tag v-if="scope.row.state == 2" type="info">等待领导审批</el-tag>
                      <el-tag v-if="scope.row.state == 3" type="success">审批通过</el-tag>
                      <el-tag v-if="scope.row.state == 5" type="error">审批不通过</el-tag>
                    </template>
                  </el-table-column>
                    <el-table-column label="操作" align="center" width="120" fixed="right">
                        <template #default="scoped">
                            <el-button type="primary" link size="small"
                             @click="router.push({path:'/approval/apply',
                              query:{                                
                                types:'view',
                                applyId:scoped.row.id
                              },
                            })">
                                查看详情
                            </el-button>
                        </template>
                    </el-table-column>
                 </el-table>
                 <el-pagination
                  v-model:current-page="formData.pageNum"
                  v-model:page-size="formData.pageSize"
                  :page-sizes="[10, 20, 30, 40]"
                  :background="true"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="tableData.length"
                  @size-change="onSizeChange"
                  @current-change="onCurrentChange"
                />
            </el-tab-pane>
        </el-tabs>
         <!-- 分页 -->

    <!-- 分页 -->
  </Box>
</template>

<style lang="scss" scoped></style>
